<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <!--3、使用组件-->
  <my-cpm></my-cpm>
  <Wind></Wind>
  <Summer></Summer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

  // 1、创建组件构造器对象
  const MyComponent = Vue.extend({
    // ``：这是ES6新语法。相当于引号，里面也是字符串。只是支持换行。
    template: `
                <div>
                    <h2>我是标题</h2>
                    <p>我是内容，哈哈哈哈啊哈哈~！</p>
                    <p>我是内容，呵呵呵呵呵呵啊~！</p>
                </div>`
  })

  // 2、注册组件 组件的标签名|组件构造器对象
  Vue.component('my-cpm', MyComponent);

  // 注意：组件必须放在自己创建的Vue实例上面
  var vm = new Vue({
    el: '#app',
    components: {
      // 标签名|组件构造器对象
      Summer: {
        template: `<div>我是组件 模板内容</div>`
      }
    }
  })
</script>
</body>
</html>